<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div><div class="abstatic-height"></div>
  <div class="app-container calendar-list-container">
    <el-row>
      <div class="xf-tabletop-handles">
        <div class="xf-tabhd-left">
          <el-radio-group v-model="radioType" @change="switchTable" class="xf-tab-bts">
            <el-radio-button label="sensor">传感器</el-radio-button>
            <el-radio-button label="device">网关设备</el-radio-button>
          </el-radio-group>
          <el-button class="filter-item" @click="handleCreate" type="primary" v-if="radioType==='sensor'" size="mini">添加传感器类型</el-button>
          <el-button class="filter-item" @click="handleCreateSimple" type="primary" v-else size="mini">添加网关设备类型</el-button>
        </div>
        <div class="xf-tabhd-right" v-if="radioType==='sensor'">
          所属系统
          <el-select v-model="listQuery.channelId" placeholder="请选择" class="xf-query-select" size="mini">
            <el-option label="全部" value="-1"></el-option>
            <el-option v-for="item in queryAffiliate" :key="item.id" :label="item.channelName" :value="item.id">
            </el-option>
          </el-select>
          <el-button @click="tableQuery" type="primary" size="mini">搜索</el-button>
          <el-popover placement="bottom-end" width="700" class="xf-custom-poper" @show="getSelected" v-model="visible2">
            <div class="xf-double-form">
              <div class="xf-dbform-item">
                <div class="xf-dbform-item__sleft">
                  <p class="xf-dbform-item__label">厂商</p>
                  <el-select placeholder="请选择厂商" v-model="slistQuery.manufacturer">
                    <el-option :label="item" :value="item" v-for="item in manufeList" :key="item"></el-option>
                  </el-select>
                </div>
                <div class="xf-dbform-item__sright">
                  <p class="xf-dbform-item__label">系列</p>
                  <el-select placeholder="请选择系列" v-model="slistQuery.equipmentType">
                    <el-option :label="item" :value="item" v-for="item in equipmentTypeList" :key="item"></el-option>
                  </el-select>
                </div>
              </div>
              <div class="xf-dbform-item">
                <div class="xf-dbform-item__sleft">
                  <p class="xf-dbform-item__label">型号</p>
                  <el-input v-model="slistQuery.model" placeholder="请输入型号"></el-input>
                </div>
              </div>
            </div>
            <div style="text-align: left; margin: 0; margin-top:20px;">
              <el-button size="mini" type="primary" @click="pointerQuery">搜索</el-button>
              <el-button type="text" size="mini" @click="visible2 = false" pain round>取消</el-button>
            </div>
            <el-button slot="reference" type="text" size="mini">高级搜索</el-button>
          </el-popover>
        </div>
        <div class="sxf-tabhd-right" v-else>
          厂商
          <el-select v-model="slistQuery.manufacturer" placeholder="请选择" class="xf-query-select" size="mini">
            <el-option v-for="item in gatewayManufacturer" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
          系列
          <el-select v-model="slistQuery.equipmentType" placeholder="请选择" class="xf-query-select" size="mini">
            <el-option v-for="item in gatewayEquipmentType" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
          型号
          <el-input v-model="slistQuery.model" placeholder="请输入型号" class="xf-query-input" size="mini"></el-input>
          <el-button @click="tableQuery" type="primary">搜索</el-button>
        </div>
      </div>
    </el-row>
    <el-table key='0' :data="list" v-loading.body="listLoading" style="width: 100%" v-if="radioType==='sensor'">
      <el-table-column label="类型编号" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.sensorType.id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="厂商">
        <template slot-scope="scope">
          <span>{{scope.row.sensorType.sensorManufacturer}}</span>
        </template>
      </el-table-column>
      <el-table-column label="系列">
        <template slot-scope="scope">
          <span>{{scope.row.sensorType.equipmentType}}</span>
        </template>
      </el-table-column>
      <el-table-column label="型号">
        <template slot-scope="scope">
          <span>{{scope.row.sensorType.model}}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属系统">
        <template slot-scope="scope">
          <span>{{scope.row.sensorType.channelName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="测点">
        <template slot-scope="scope">
          <span>{{scope.row.measuringPoint.join(",")}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <span @click="handleUpdate(scope.row.sensorType)" class="comm-table-btn"><icon-svg icon-class="bianji" style="fill:#50E3C2" /></span>
          <span @click="handleDelete(scope.row.sensorType)" class="comm-table-btn"><icon-svg icon-class="shanchu" style="fill:#50E3C2" /></span>
        </template>
      </el-table-column>
    </el-table>
    <el-table key='1' :data="devicelist" v-loading.body="listLoading" style="width: 100%" v-else>
      <el-table-column label="类型编号" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="厂商">
        <template slot-scope="scope">
          <span>{{scope.row.manufacturer}}</span>
        </template>
      </el-table-column>
      <el-table-column label="系列">
        <template slot-scope="scope">
          <span>{{scope.row.equipmentType}}</span>
        </template>
      </el-table-column>
      <el-table-column label="型号">
        <template slot-scope="scope">
          <span>{{scope.row.model}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <span @click="deviceHandleUpdate(scope.row)" class="comm-table-btn"><icon-svg icon-class="bianji" style="fill:#50E3C2" /></span>
          <span @click="handleDelete(scope.row)" class="comm-table-btn"><icon-svg icon-class="shanchu" style="fill:#50E3C2" /></span>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[15,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
    <slider-panel :Show.sync="dialogFormVisible" custom-class="out-side-frame">
      <div class="form-content-frame">
        <div class="dialog-within-scroll">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" label-position='top' @submit.native.prevent>
                <el-scrollbar style="height:calc(100vh - 110px);">
              <el-form-item label="厂商" prop="manufacturer">
                <el-select placeholder="请选择厂商" v-model="form.manufacturer" style="width: 100%">
                  <el-option :label="item" :value="item" v-for="item in selectManufact" :key="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="系列" prop="sensorType">
                <el-input v-model.trim="form.sensorType" placeholder="请输入传感器系列"></el-input>
              </el-form-item>
              <el-form-item label="型号" prop="model">
                <el-input v-model.trim="form.model" placeholder="请输入传感器型号"></el-input>
              </el-form-item>
              <el-form-item label="所属系统" prop="channelId" style="width: 100%">
                <el-select v-model="form.channelId" placeholder="请选择所属系统" style="width: 100%" :disabled="channelEdit">
                  <el-option v-for="item in selectChannel" :key="item.id" :label="item.channelName" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="测点" prop="measuringPointIds">
                <el-checkbox-group v-model="form.measuringPointIds">
                  <el-checkbox v-for="item in devicePoinsts" :label="item.id" :key="item.id">{{item.measuringPoint}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.codeName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.dataUnit}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
          </el-scrollbar>
                <el-button v-if="dialogStatus==='create'" type="primary" @click="create('form')" size="mini" native-type="submit">确 定</el-button>
                <el-button v-else type="primary" @click="update('form')" size="mini" native-type="submit">确 定</el-button>
                <el-button @click="cancel('form')" size="mini" type="text">取 消</el-button>
            </el-form>

        </div>

      </div>
    </slider-panel>
    <slider-panel :Show.sync="devicedialogFormVisible" custom-class="out-side-frame">
      <div class="form-content-frame">
        <el-form :model="deviceform" :rules="devicerules" ref="deviceform" label-width="100px" label-position='top' @submit.native.prevent>
          <el-form-item label="厂商" prop="manufacturer">
            <el-select placeholder="请选择厂商" v-model="deviceform.manufacturer" style="width: 100%">
              <el-option :label="item" :value="item" v-for="item in sselectManufact" :key="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="系列" prop="equipmentType">
            <el-input v-model.trim="deviceform.equipmentType" placeholder="请输入网关设备系列"></el-input>
          </el-form-item>
          <el-form-item label="型号" prop="model">
            <el-input v-model.trim="deviceform.model" placeholder="请输入网关设备系列"></el-input>
          </el-form-item>
            <el-button v-if="dialogStatus==='create'" type="primary" @click="deviceCreate('deviceform')" size="mini" native-type="submit">确 定</el-button>
            <el-button v-else type="primary" @click="deviceUpdate('deviceform')" size="mini" native-type="submit">确 定</el-button>
            <el-button @click="deviceCancel('deviceform')" size="mini" type="text">取 消</el-button>
        </el-form>
      </div>
    </slider-panel>
    <!-- 删除操作弹窗 -->
    <el-dialog :title="radioType==='sensor'?'删除传感器系列':'删除网关设备系列'" :visible.sync="dialogDeleteVisible" :show-close='false' custom-class="xf-jc-dialog" width="360px">
      <div class="xf-jc-deletect" v-if="deleteJumpObj.length>0">
        <p v-if="radioType==='sensor'">有{{deleteJumpObj.length}}个子站使用了此传感器系列，无法删除。请联系子站管理员停用传感器系列再删除
        </p>
        <p v-else>
          有{{deleteJumpObj.length}}个子站使用了此网关设备系列，无法删除。请联系子站管理员解绑后再删除
        </p>
        <div>
          <el-button type="text" @click="openChildsites">
            查看子站
            <i class="el-icon-d-arrow-right"></i>
          </el-button>
        </div>
      </div>
      <div class="xf-jc-deletect" v-else>
        <p v-if="radioType==='sensor'">无子站使用此传感器系列，确定删除？</p>
        <p v-else>
          无子站使用此网关设备系列，确定删除？
        </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" size="mini" v-if="deleteJumpObj.length<1" @click="deleteD(currentSelectObj)">删除</el-button>
        <el-button type="text" size="mini" v-if="deleteJumpObj.length<1" @click="dialogDeleteVisible = false">取消</el-button>
        <el-button type="primary" size="mini" v-if="deleteJumpObj.length>0" @click="dialogDeleteVisible = false">知道了</el-button>
      </div>
    </el-dialog>
    <childSiteDialog :Show.sync="childSitesShow" :siteIds.sync="childSiteids"></childSiteDialog>
  </div>
  </div>
</template>

<script>
import childSiteDialog from "@/components/ChildsiteList";

import {
  page,
  affiliated,
  deleteQuery,
  deviceAddObj,
  deviceGetObj,
  devicePutObj,
  deviceDelObj,
  deviceDeleteQuery,
  devicePage,
  devicePoint,
  gatewaySelect,
  addObj,
  getObj,
  delObj,
  putObj
} from "@/api/device/deviceSensorSeries/index";
import sliderPanel from '@/components/SliderPanel'
export default {
  name: "deviceSensorSeries",
  components: { childSiteDialog,sliderPanel },
  data() {
    return {
      childSitesShow: false,
      channelEdit:false,
      childSiteids: "",
      queryAffiliate:[],//所属系统条件
      manufeList:[],//厂商列表
      equipmentTypeList:[],//系列列表
      visible2:false,
      selectChannel:[],
      selectManufact:[],
      gatewayEquipmentType:[],//网关查询条件
      gatewayManufacturer:[],
      sselectManufact:[],//添加查询厂商列表
      radioType: "sensor",
      sensorId: "",
      deviceform: {
        manufacturer:'',
        equipmentType:'',
        model:''
      },
      devicerules: {
        manufacturer:[
          {
            required: true,
            message: "请选择厂商",
            trigger: "change"
          }
        ],
        model: [
          {
            required: true,
            message: "请输入型号",
            trigger: "blur"
          },
          {
            min: 1,
            max: 50,
            message: "最多允许输入50个字符",
            trigger: "blur"
          }
        ],
        equipmentType: [
          {
            required: true,
            message: "请输入网关设备系列",
            trigger: "blur"
          },
          {
            min: 1,
            max: 50,
            message: "最多允许输入50个字符",
            trigger: "blur"
          }
        ]
      },
      form: {
        sensorType:'',
        model:'',
        manufacturer:'',
        channelId:'',
        measuringPointIds: []
      },
      rules: {
        sensorType: [
          {
            required: true,
            message: "请输入传感器系列",
            trigger: "blur"
          },
          {
            min: 1,
            max: 50,
            message: "最多允许输入50个字符",
            trigger: "blur"
          }
        ],
        model: [
          {
            required: true,
            message: "请输入传感器型号",
            trigger: "blur"
          },
          {
            min: 1,
            max: 100,
            message: "最多允许输入100个字符",
            trigger: "blur"
          }
        ],
        manufacturer:[
          {
            required: true,
            message: "请选择传感器厂商",
            trigger: "change"
          }
        ],
        channelId:[{
          required: true,
          message: "请选择传感器所属系统",
          trigger: "change"
        }],
        measuringPointIds: [
          {
            required: true,
            message: "请选择测点",
            trigger: "change"
          }
        ]
      },
      list: null,
      devicelist: null,
      devicePoinsts: [],
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 15,
        channelId: '-1',
      },
      slistQuery:{
        manufacturer:'全部',
        equipmentType:'全部',
        model:''
      },
      dialogFormVisible: false,
      devicedialogFormVisible: false,
      dialogDeleteVisible: false,
      deleteJumpObj: "",
      currentSelectObj: {},
      dialogStatus: "",
      textMap: {
        update: "编辑传感器类型",
        create: "添加传感器类型"
      },
      gatetextMap: {
        update: "编辑网关设备类型",
        create: "添加网关设备类型"
      },
      tableKey: 0
    };
  },
  created() {
    this.getList();
    this.getAffiliated();
    this.getDevicePoinst();
  },
  computed: {},
  methods: {
    getGateways(){
    // 网关条件查询
      gatewaySelect().then(res=>{
        this.gatewayEquipmentType = res.data.equipmentType;//网关查询条
        this.gatewayManufacturer = res.data.manufacturer;
        this.sselectManufact = res.data.selectManufacturer;
      })
    },
    getAffiliated(){
      affiliated().then(res=>{
         //初始化查询条件
         this.queryAffiliate = res.data.channel;
         this.selectChannel = res.data.selectChannel;
         this.selectManufact = res.data.selectManufacturer;
      })
    },
    openChildsites() {
      this.childSitesShow = true;
    },
    advancedSearchReset(){
      this.slistQuery.manufacturer = '全部';
      this.slistQuery.equipmentType = '全部';
      this.slistQuery.model = '';
    },
    tableQuery() {
      if (this.radioType === "sensor") {
        //重置高级查询条件
        this.advancedSearchReset();
        this.getList();
      } else {
        this.getDeviceList();
      }
    },
    getSelected() {
      // 获取高级查询条件
      affiliated().then(res=>{
        this.equipmentTypeList = res.data.equipmentType;
        this.manufeList = res.data.manufacturer;
      })
    },
    pointerQuery(){
      // 高级查询
      this.visible2 = false;
      this.listLoading = true;
      // 取消绑定并合并查询条件
      let contactKeys = Object.assign(
        JSON.parse(JSON.stringify(this.listQuery)),
        JSON.parse(JSON.stringify(this.slistQuery))
      );
      page(contactKeys).then(response => {
        this.list = response.data.rows;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    switchTable() {
      // 切换按钮时重置分页查询条件
      this.listQuery.page = 1;
      this.listQuery.limit = 15;
      this.advancedSearchReset();
        if (this.radioType === "sensor") {
        this.listQuery.channelId = "-1";
        this.getList();
        this.getAffiliated();
      } else {
        this.listQuery.channelId = undefined;
        this.getGateways();
        this.getDeviceList();
      }
    },
    getList() {
      this.listLoading = true;
      page(Object.assign(this.listQuery,this.slistQuery)).then(response => {
        this.list = response.data.rows;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    handlerest() {
      this.sensorId = "";
      this.form.sensorType = undefined;
      this.form.measuringPointIds = [];
      this.form.channelId = '';
      this.form.model = '';
      this.form.manufacturer = '';
    },
    deviceHandlerest() {
      this.deviceform.type = undefined;
    },
    getDevicePoinst() {
      devicePoint().then(response => {
        this.devicePoinsts = response;
      });
    },
    getDeviceList() {
      this.listLoading = true;
      devicePage(Object.assign(this.listQuery,this.slistQuery)).then(response => {
        this.devicelist = response.data.rows;
        this.total = response.data.total;
        this.listLoading = false;
      }).catch(function (error) {
        this.listLoading = false;
              console.log(error);
            });
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      if (this.radioType==='sensor') {
        this.getList();
      }else{
        this.getDeviceList()
      }
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      if (this.radioType==='sensor') {
        this.getList();
      }else{
        this.getDeviceList()
      }
    },
    handleCreate() {
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.channelEdit = false;
      this.$refs['form'].resetFields();
    },
    handleCreateSimple() {
      this.dialogStatus = "create";
      this.devicedialogFormVisible = true;
      this.channelEdit = false;
      this.deviceform = {};
    },
    handleUpdate(row) {
      getObj(row.id).then(res => {
        if(res.status===200){
          this.sensorId = res.data.sensorType.id;
          this.form.sensorType = res.data.sensorType.equipmentType;
          this.devicePoinsts = res.data.measuringPoint;
          this.channelEdit = res.data.channelFlag;

          let checkedItem = res.data.measuringPoint;
          let checkedIds = [];
          checkedItem.forEach(item => {
            if (item.checked === true) {
              checkedIds.push(item.id);
            }
          });
          this.form.measuringPointIds = checkedIds;
          this.form.model = res.data.sensorType.model;
          this.form.channelId = res.data.sensorType.channelId;
          this.form.manufacturer = res.data.sensorType.manufacturer;
          this.dialogFormVisible = true;
          this.dialogStatus = "update"
        }
      }).catch(function (error) {
              console.log(error);
            });
    },
    deviceHandleUpdate(row) {
      deviceGetObj(row.id).then(response => {
        this.deviceform = response.data;
        this.devicedialogFormVisible = true;
        this.dialogStatus = "update";
      });
    },
    deleteD(row) {
      if (this.radioType === "sensor"){
      delObj(row.id).then(() => {
        this.dialogDeleteVisible = false;
        this.$notify({
          title: "成功",
          message: "删除成功",
          type: "success",
          duration: 2000
        });
        this.getList();
      }).catch(function (error) {
              console.log(error);
            });
      }else{
         deviceDelObj(row.id).then(() => {
        this.dialogDeleteVisible = false;
        this.$notify({
          title: "成功",
          message: "删除成功",
          type: "success",
          duration: 2000
        });
        this.getDeviceList();
      }).catch(function (error) {
              console.log(error);
            });
      }
    },
    handleDelete(row) {
      // 删除操作查询
      let self = this;
      if (this.radioType === "sensor") {
        deleteQuery(row.id).then(response => {
          if (response.status === 200) {
            self.currentSelectObj = row;
            self.dialogDeleteVisible = true;
            self.deleteJumpObj = response.data;
            self.childSiteids = response.data.join(",");
          }
        }).catch(function (error) {
              console.log(error);
            });
      } else {
        deviceDeleteQuery(row.id).then(res => {
          if (res.status === 200) {
            self.currentSelectObj = row;
            self.dialogDeleteVisible = true;
            self.deleteJumpObj = res.data;
            self.childSiteids = res.data.join(",");
          }
        }).catch(function (error) {
              console.log(error);
            });
      }
    },
    create(formName) {
      const set = this.$refs;
      let self = this;
      set[formName].validate(valid => {
        if (valid) {
          addObj(Object.assign(this.form,{'measuringPointIds':JSON.parse(JSON.stringify(this.form.measuringPointIds.join(",")))})).then((res) => {

            this.dialogFormVisible = false;

            this.$refs[formName].resetFields();
            this.handlerest();

            this.getList();
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          }).catch(function (error) {
              console.log(error);
              self.$refs[formName].resetFields();
              self.handlerest();
            });
        } else {
          return false;
        }
      });
    },
    deviceCreate(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          deviceAddObj(this.deviceform).then(() => {
            this.devicedialogFormVisible = false;

            this.$refs[formName].resetFields();
            this.deviceHandlerest();

            this.getDeviceList();
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          }).catch(function (error) {
              console.log(error);
            });
        } else {
          return false;
        }
      });
    },
    cancel(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
      this.handlerest(formName);
    },
    deviceCancel(formName) {
      this.devicedialogFormVisible = false;
      this.$refs[formName].resetFields();
      this.deviceHandlerest(formName);
    },
    update(formName) {
      const set = this.$refs;
      let self = this;
      set[formName].validate(valid => {
        if (valid) {
          this.form.id = this.sensorId;
          putObj(Object.assign(this.form,{'measuringPointIds':JSON.parse(JSON.stringify(this.form.measuringPointIds.join(",")))})).then((res) => {

            this.dialogFormVisible = false;

            this.$refs[formName].resetFields();
            this.handlerest();
            this.getList();
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000
            });
          }).catch(function (error) {
              self.$refs[formName].resetFields();
              self.handlerest();
              console.log(error);
            });
        } else {
          return false;
        }
      });
    },
    deviceUpdate(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          devicePutObj(this.deviceform).then(() => {
            this.devicedialogFormVisible = false;

            this.$refs[formName].resetFields();
            this.deviceHandlerest();
            this.getDeviceList();
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000
            });
          }).catch(function (error) {
              console.log(error);
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
// 精准查询
.xf-double-form{
  .xf-dbform-item{
    display: flex;
    justify-content: space-between;
    .xf-dbform-item__sleft{
      .el-input{
        width: 320px;
      }
    }
    .xf-dbform-item__sright{
      .el-input{
        width: 320px;
      }
    }
  }
}
.sxf-tabhd-right{
  .xf-query-input,
  .xf-query-select {
    width: 150px;
    margin: 0 10px;
  }
}
.fulldialog > div {
  width: 500px;
  margin: 0 auto;
}
.fulldialog .el-dialog__title {
  font-size: 32px;
}
.fulldialog {
  .el-dialog__header {
    margin-top: 20px;
  }
  .el-checkbox {
    display: block;
    margin-left: 0;
  }
  .custom-dialog-btn {
    position: absolute;
    font-size: 30px;
    left: 40px;
    top: 20px;
    color: #fff;
    &:hover {
      cursor: pointer;
    }
  }
  .dialog-footer {
    text-align: left;
  }
}
</style>
